<template>
  <div>
    <Button>Default</Button>
    <Button type="primary">Primary</Button>
    <Button type="dashed">Dashed</Button>
    <Button type="text">Text</Button>
    <br><br>
    <Button type="info">Info</Button>
    <Button type="success">Success</Button>
    <Button type="warning">Warning</Button>
    <Button type="error">Error</Button>
    <br><br>
    <Button type="default" ghost>Default</Button>
    <Button type="primary" ghost>Primary</Button>
    <Button type="dashed" ghost>Dashed</Button>
    <Button type="text" ghost>Text</Button>
    <Button type="info" ghost>Info</Button>
    <Button type="success" ghost>Success</Button>
    <Button type="warning" ghost>Warning</Button>
    <Button type="error" ghost>Error</Button>
    <br><br>
    <Button type="primary" shape="circle" icon="ios-search"></Button>
    <Button type="primary" icon="ios-search">Search</Button>
    <Button type="primary" shape="circle" icon="ios-search">Search</Button>
    <Button type="primary" shape="circle">Circle</Button>
    <br><br>
    <Button shape="circle" icon="ios-search"></Button>
    <Button icon="ios-search">Search</Button>
    <Button shape="circle" icon="ios-search">Search</Button>
    <Button shape="circle">Circle</Button>
    <br><br>
    <RadioGroup v-model="buttonSize" type="button">
      <Radio label="large">Large</Radio>
      <Radio label="default">Default</Radio>
      <Radio label="small">small</Radio>
    </RadioGroup>
    <br><br>
    <Button :size="buttonSize" type="primary">Primary</Button>
    <Button :size="buttonSize" type="default">Default</Button>
    <Button :size="buttonSize" type="dashed">Dashed</Button>
    <Button :size="buttonSize" type="text">Text</Button>
    <br><br>
    <Button :size="buttonSize" icon="ios-download-outline" type="primary" shape="circle"></Button>
    <Button :size="buttonSize" icon="ios-download-outline" type="primary">Download</Button>
    <br><br>
    <ButtonGroup :size="buttonSize">
      <Button :size="buttonSize" type="primary">
        <Icon type="ios-arrow-back" />
        Backward
      </Button>
      <Button :size="buttonSize" type="primary">
        Forward
        <Icon type="ios-arrow-forward" />
      </Button>
    </ButtonGroup>
    <br><br>
  </div>
</template>

<script>
  export default {
    name: "iview_button",
    props: {
      
    },
    data() {
      return {
        buttonSize: 'large'
      }
    },
    mounted() {
    
    },
    methods: {
      
    },
    computed: {
      
    },
    watch: {
      
    }
  }
</script>

<style scoped>

</style>